<template>
  <v-card class="mx-auto">
    <v-card-title>先天学习类型配置</v-card-title>
    <v-card-actions>
      <v-btn color="primary" small @click.stop="dataTrigger = !dataTrigger"
        >刷新</v-btn
      >
      <v-btn color="primary" small @click.stop="onAddNew">增加记录</v-btn>
      <v-dialog v-model="showEditor">
        <LearnTypeConfigEditor
          :LearnType="curItem"
          @cancel="showEditor = false"
          @finish="onFinishEdit"
        >
        </LearnTypeConfigEditor>
      </v-dialog>
    </v-card-actions>
    <DataTableServer
      :headers="headers"
      :queryBackendFunc="queryFunc"
      :sortableProps="[]"
      :getDataTrigger="dataTrigger"
      dense
    >
      <template v-slot:item.create_time="{ item }">
        <span>
          {{ simpleDateFormat(item.create_time) }}
        </span>
      </template>
      <template v-slot:item.update_time="{ item }">
        <span>
          {{ simpleDateFormat(item.update_time) }}
        </span>
      </template>
      <template v-slot:item.action="{ item }">
        <span>
          <v-btn color="primary" small @click.stop="onEdit(item)">编辑</v-btn>
          <v-btn color="primary" small @click.stop="onDelete(item)">删除</v-btn>
        </span>
      </template>
    </DataTableServer>
  </v-card>
</template>

<script>
// 文章列表
import DataTableServer from "@/components/DataTableServer";
import LearnTypeConfigEditor from "./LearnTypeConfigEditor";
import DateMixin from "@/mixin/DateMixin";
import { LearnTypeConfig } from "@/store/models/finger_config";

export default {
  name: "LearnTypeList",
  components: {
    DataTableServer,
    LearnTypeConfigEditor,
  },
  mixins: [DateMixin],
  props: {
    headers: {
      type: Array,
      required: false,
      default: () => [
        {
          text: "id",
          align: "left",
          sortable: true,
          value: "id",
        },
        {
          text: "针对领域",
          align: "left",
          sortable: true,
          value: "report_target",
        },
        {
          text: "结果类型",
          align: "left",
          sortable: true,
          value: "learn_type",
        },
        {
          text: "编辑人",
          align: "left",
          sortable: true,
          value: "updated_by.userdesc",
        },
        {
          text: "创建时间",
          align: "left",
          sortable: true,
          value: "create_time",
        },
        {
          text: "更新时间",
          align: "left",
          sortable: true,
          value: "update_time",
        },
        {
          text: "操作",
          align: "left",
          sortable: true,
          value: "action",
        },
      ],
    },
  },
  data: () => ({
    showEditor: false,
    curItem: new LearnTypeConfig(),
    dataTrigger: false,
  }),

  methods: {
    async queryFunc(query_args, page, per_page) {
      const query_params = { ...query_args };

      const results = await LearnTypeConfig.fetch(
        query_params,
        page,
        per_page
      );
      // 让父组件能感知总数
      this.$emit("updateTotalItem", results.total);
      return results;
    },
    onAddNew() {
      this.curItem = new LearnTypeConfig();
      this.showEditor = false;
      this.showEditor = true;
    },
    onEdit(item) {
      LearnTypeConfig.getById(item.id).then((res) => {
        this.curItem = res;
        this.showEditor = false;
        this.showEditor = true;
      });
    },
    onFinishEdit(item) {
      console.log("finish edit item");
      this.dataTrigger = !this.dataTrigger;
      this.showEditor = false;
    },

    onDelete(item) {
      this.$dialog.confirm({
        text: "确定要删除该记录?",
        title: "警告",
        waitForResult: true,
        actions: {
          false: {
            text: "取消",
            color: "blue",
          },
          true: {
            text: "确定",
            color: "red",
            handle: () => {
              return item.delete().then((res) => {
                this.dataTrigger = !this.dataTrigger;
                return;
              });
            },
          },
        },
      });
    },
  },
};
</script>
